<template>
    <div class="parameter-management">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>安全策略管理</span>
        </div>
        <el-form :model="securityPolicy" label-width="120px">
          <el-form-item label="安全策略名称">
            <el-input v-model="securityPolicy.name" placeholder="请输入安全策略名称"></el-input>
          </el-form-item>
          <el-form-item label="安全策略描述">
            <el-input v-model="securityPolicy.description" type="textarea" placeholder="请输入安全策略描述"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveSecurityPolicy">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>防攻击策略管理</span>
        </div>
        <el-form :model="attackProtection" label-width="120px">
          <el-form-item label="防攻击策略名称">
            <el-input v-model="attackProtection.name" placeholder="请输入防攻击策略名称"></el-input>
          </el-form-item>
          <el-form-item label="防攻击策略描述">
            <el-input v-model="attackProtection.description" type="textarea" placeholder="请输入防攻击策略描述"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveAttackProtection">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>API异常下架策略管理</span>
        </div>
        <el-form :model="apiOffPolicy" label-width="120px">
          <el-form-item label="API异常下架策略名称">
            <el-input v-model="apiOffPolicy.name" placeholder="请输入API异常下架策略名称"></el-input>
          </el-form-item>
          <el-form-item label="API异常下架策略描述">
            <el-input v-model="apiOffPolicy.description" type="textarea" placeholder="请输入API异常下架策略描述"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveApiOffPolicy">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>Token策略管理</span>
        </div>
        <el-form :model="tokenPolicy" label-width="120px">
          <el-form-item label="Token串">
            <el-input v-model="tokenPolicy.token" placeholder="请输入Token串"></el-input>
          </el-form-item>
          <el-form-item label="过期时间">
            <el-date-picker v-model="tokenPolicy.expiration" type="datetime" placeholder="选择过期时间"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveTokenPolicy">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全局策略管理</span>
        </div>
        <el-form :model="globalPolicy" label-width="120px">
          <el-form-item label="全局策略名称">
            <el-input v-model="globalPolicy.name" placeholder="请输入全局策略名称"></el-input>
          </el-form-item>
          <el-form-item label="全局策略描述">
            <el-input v-model="globalPolicy.description" type="textarea" placeholder="请输入全局策略描述"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveGlobalPolicy">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ParameterManagement',
    data() {
      return {
        securityPolicy: {
          name: '',
          description: ''
        },
        attackProtection: {
          name: '',
          description: ''
        },
        apiOffPolicy: {
          name: '',
          description: ''
        },
        tokenPolicy: {
          token: '',
          expiration: ''
        },
        globalPolicy: {
          name: '',
          description: ''
        }
      };
    },
    methods: {
      saveSecurityPolicy() {
        // 保存安全策略逻辑
        this.$message({
          message: '安全策略保存成功',
          type: 'success'
        });
      },
      saveAttackProtection() {
        // 保存防攻击策略逻辑
        this.$message({
          message: '防攻击策略保存成功',
          type: 'success'
        });
      },
      saveApiOffPolicy() {
        // 保存API异常下架策略逻辑
        this.$message({
          message: 'API异常下架策略保存成功',
          type: 'success'
        });
      },
      saveTokenPolicy() {
        // 保存Token策略逻辑
        this.$message({
          message: 'Token策略保存成功',
          type: 'success'
        });
      },
      saveGlobalPolicy() {
        // 保存全局策略逻辑
        this.$message({
          message: '全局策略保存成功',
          type: 'success'
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .parameter-management {
    padding: 20px;
  }
  
  .box-card {
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  </style>
  